home *** CD-ROM | disk | FTP | other *** search
/ MacFormat UK 179 / MF_UK_179_1.iso / DiscContents / In the mag / Widgets / CodeBreaker 1.0 / CodeBreaker / CodeBreaker.wdgt / ButtonControl.js < prev    next >
Encoding:
JavaScript  |  2006-11-29  |  7.2 KB  |  253 lines
  1. //document responisble for controlling all user interaction through DOM manipulation
  2. //of buttons
  3.  
  4. var colorSelectors;  //JS objects responsible for holding the color selectors
  5. var ids                //ids for color selector objects
  6. var curColor;
  7. var curRow;
  8. var selectedDom;
  9. var colorPngs;
  10. var curGuess;
  11. var resultPegs;
  12. var okButton;
  13. var allowDupes;
  14. var allowBlanks;
  15.  
  16. var code;
  17. var resultPngs;
  18. var losses;
  19. var guesses;
  20. var wins;
  21.  
  22. function setup()
  23. {
  24.     //load prefs
  25.  
  26.     allowDupes = widget.preferenceForKey("allowDupes");
  27.     allowBlanks = widget.preferenceForKey("allowBlanks");
  28.     if(!allowDupes){
  29.         allowDupes = false;
  30.     }
  31.     if(!allowBlanks){
  32.         allowBlanks = false;
  33.     }
  34.     losses = widget.preferenceForKey("losses");
  35.     if(!losses){
  36.         losses = 0;
  37.         widget.setPreferenceForKey(0, "losses");
  38.     }
  39.     guesses = widget.preferenceForKey("guesses");
  40.     if(!guesses){
  41.         guesses = 0;
  42.         widget.setPreferenceForKey(0, "guesses");
  43.     }
  44.     wins = widget.preferenceForKey("wins");
  45.     if(!wins){
  46.         wins = 0;
  47.         widget.setPreferenceForKey(0, "wins");
  48.     }
  49.     document.getElementById("allowBlanks").checked = allowBlanks;
  50.     document.getElementById("allowDupes").checked = allowDupes;
  51.     
  52.     //create buttons, glass and info
  53.     new AppleGlassButton(document.getElementById("doneButton"), "Done", hidePrefs);
  54.     new AppleGlassButton(document.getElementById("newGame"), "New Game", newGame);
  55.      new AppleGlassButton(document.getElementById("hideInstructions"), "Back", hideInstructions);
  56.      new AppleGlassButton(document.getElementById("clearStats"), "Clear Stats", clearStats);    
  57.      new AppleInfoButton(document.getElementById("infoButton"), document.getElementById("front"), "white", "white",showPrefs);
  58.      
  59.     //init static arrays
  60.     colorPngs = [ "images/white.png", "images/blue.png", "images/black.png", "images/yellow.png", "images/red.png", "images/green.png" ];
  61.     curGuess = new Array(4);
  62.     colorSelectors = new Array(6);
  63.     curColor = -1;
  64.  
  65.     //create color elements 
  66.     ids = [ "white-sel", "blue-sel", "black-sel", "yellow-sel", "red-sel",  "green-sel" ];
  67.     for(var i = 0; i < 6; i++){
  68.         var next = document.createElement("img");
  69.         next.setAttribute("id", ids[i]);
  70.         next.setAttribute("src", "images/blank.png");
  71.         next.setAttribute("onclick", "colorSelected(" + i +",this);");
  72.         next.setAttribute("onmouseover", "colorMouseover(this);");
  73.         next.setAttribute("onmouseout", "colorMouseout(this);");
  74.         document.getElementById("front").appendChild(next);
  75.     }
  76.     updateStats();
  77.     setupGame();
  78.     document.addEventListener("keydown", keyHandler, true);
  79. }
  80.  
  81. function newGame(){
  82.     hidePrefs();
  83.     setupGame();
  84. }
  85.  
  86. function setupGame(){
  87.     //init game specific arrays
  88.     resultPegs = new Array(10);
  89.     for(var i = 0; i < 10; i++){
  90.         resultPegs[i] = new Array(4);
  91.     }
  92.     
  93.     for(var i = 0; i < 4; i++){
  94.         curGuess[i] = -1;
  95.     }
  96.     
  97.     //init game specific variabls
  98.     curRow = 9;
  99.     
  100.     //delete any pre-existing DOM elements
  101.     var toDelete;
  102.     var front = document.getElementById("front");
  103.     if((toDelete = document.getElementById("gameBoard"))){
  104.         front.removeChild(toDelete);
  105.     }
  106.     if((toDelete = document.getElementById("resultPegs"))){
  107.         front.removeChild(toDelete);
  108.     }
  109.     if((toDelete = document.getElementById("okButton"))){
  110.         front.removeChild(toDelete);
  111.     }    
  112.     if((toDelete = document.getElementById("flipped"))){
  113.         front.removeChild(toDelete);
  114.     }
  115.                                                          
  116.     //create game board
  117.     var gameBoard = document.createElement("div");
  118.     gameBoard.setAttribute("id", "gameBoard");
  119.     var resultPegsDom = document.createElement("div");
  120.     resultPegsDom.setAttribute("id", "resultPegs");
  121.     //gameBoard.style.position = "absolulte";
  122.     gameBoard.style.left = "57px";
  123.     gameBoard.style.top = "54px";
  124.     var xOffset = 20;
  125.     var yOffset = 26;
  126.     for(var row = 0; row < 10; row++){
  127.         for(var col = 0; col < 4; col++){
  128.             var peg = document.createElement("img");
  129.             //set its position, and style
  130.             peg.style.position = "absolute";
  131.             peg.style.left = 56 + col*yOffset + "px";
  132.             peg.style.top = 53 + row*xOffset + "px";
  133.             peg.setAttribute("src", "images/blank.png");
  134.             peg.setAttribute("class", "peg");
  135.             //set its functionallity
  136.             peg.setAttribute("onclick",  "pegClick(" + row + ", " + col + ", this);");
  137.         
  138.             gameBoard.appendChild(peg);
  139.             
  140.         }
  141.         //create result pegs
  142.         var curPeg = (resultPegs[row][0] = document.createElement("img"));
  143.         curPeg.style.position = "absolute";
  144.         curPeg.style.left = "20px";
  145.         curPeg.style.top = 53 + row*xOffset + "px";
  146.         curPeg.setAttribute("src", "images/blank.png");
  147.         resultPegsDom.appendChild(curPeg);
  148.         var curPeg = (resultPegs[row][1] = document.createElement("img"));
  149.         curPeg.style.position = "absolute";
  150.         curPeg.style.left = "28px";    
  151.         curPeg.style.top = 53 + row*xOffset + "px";        
  152.         curPeg.setAttribute("src", "images/blank.png");
  153.         resultPegsDom.appendChild(curPeg);
  154.         var curPeg = (resultPegs[row][2] = document.createElement("img"));
  155.         curPeg.style.position = "absolute";
  156.         curPeg.style.left = "20px";    
  157.         curPeg.style.top = 61 + row*xOffset + "px";    
  158.         curPeg.setAttribute("src", "images/blank.png");
  159.         resultPegsDom.appendChild(curPeg);
  160.         var curPeg = (resultPegs[row][3] = document.createElement("img"));
  161.         curPeg.style.position = "absolute";
  162.         curPeg.style.left = "28px";
  163.         curPeg.style.top = 61 + row*xOffset + "px";
  164.         curPeg.setAttribute("src", "images/blank.png");
  165.         resultPegsDom.appendChild(curPeg);
  166.     }
  167.     document.getElementById("front").appendChild(gameBoard);
  168.     document.getElementById("front").appendChild(resultPegsDom);
  169.     
  170.     //set up OK button
  171.     okButton = document.createElement("img");
  172.     okButton.setAttribute("id", "okButton");
  173.     okButton.setAttribute("src", "images/ok.png");
  174.     okButton.setAttribute("onclick", "nextGuess();");
  175.     okButton.style.position = "absolute";
  176.     okButton.style.left = "152px";
  177.     setControlPosition(okButton);
  178.     document.getElementById("front").appendChild(okButton);
  179.     
  180.     setupColorLogic();
  181. }
  182.  
  183. function colorSelected(index, domEl){
  184.     curColor = index;
  185.     if(selectedDom != null){
  186.         selectedDom.setAttribute("src", "images/blank.png");
  187.     }
  188.     selectedDom = domEl;
  189.     domEl.setAttribute("src", "images/peg_sel.png");
  190. }
  191.  
  192. function colorMouseover(domEl){
  193.     if(selectedDom != domEl){
  194.         domEl.setAttribute("src", "images/peg_hl.png");
  195.     }
  196. }
  197.  
  198. function colorMouseout(domEl){
  199.     if(selectedDom != domEl){
  200.         domEl.setAttribute("src", "images/blank.png");
  201.     }
  202. }
  203.  
  204. function pegClick(row,col,domEl){
  205.     if(row == curRow){
  206.         if(curGuess[col] == curColor){
  207.             curGuess[col] = -1;
  208.             domEl.setAttribute("src", "images/blank.png");
  209.         }else{
  210.             curGuess[col] = curColor;
  211.             domEl.setAttribute("src", colorPngs[curColor]);
  212.         }
  213.     }
  214. }
  215.  
  216. function setControlPosition(domEl){
  217.     domEl.style.top = 52 + curRow*20 + "px";
  218. }
  219.  
  220. function nextGuess(){
  221.     evaluate(curGuess);    
  222.     if(--curRow < 0){
  223.         gameOver(false);
  224.         return;
  225.     }
  226.     for(var i = 0; i < 4; i++){
  227.         curGuess[i] = -1;
  228.     }
  229.     setControlPosition(okButton);
  230. }
  231.  
  232. function keyHandler(e){
  233.     e = (e) ? e : ((window.event) ? event : null);
  234.     if(e){
  235.         var code = (e.charCode) ? e.charCode : ((e.which) ? e.which : e.keyCode);
  236.         keyHit = code - 49;
  237.         if (keyHit < 6 && keyHit > -1) {
  238.             colorSelected(keyHit, document.getElementById(ids[keyHit]));
  239.         }
  240.         e.stopPropagation();
  241.         e.preventDefault();
  242.     }
  243. }
  244.  
  245. function clicked(url){
  246.     if(widget)
  247.         widget.openURL(url);
  248. }
  249.  
  250. function donate(){
  251.     clicked("https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=backsmith%40gmail%2ecom&item_name=CodeBreaker%20widget&no_shipping=2&no_note=1&tax=0¤cy_code=USD&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8");
  252. }
  253.